<template>
	<view class="message-image">
		<image :src="data.info[1].url.indexOf('https') > -1 ? data.info[1].url : data.info[1].imageUrl" :style="{height:imageHeight, width:imageWidth}"
			:class="['content-' + message.flow]" :mode="imageHeight == 'NaNpx' ? 'widthFix': ''"></image>
		<!-- <div class="progress"  v-if="data.progress">
      <progress :value="data.progress" max="1"></progress>
    </div> -->
		<g-preview-img :target="tap" :imgList="imglist" ref="preview" style="position:fixed;bottom:0;left:0" v-if="showPreviewRef" @preivew="closePreview"></g-preview-img>
	</view>

</template>

<script lang="ts">
	import {
		defineComponent,
		watchEffect,
		reactive,
		toRefs,
		onMounted,
		ref,
		nextTick,
		getCurrentInstance
	} from 'vue';
  import { useI18n } from 'vue-i18n';
	export default defineComponent({
		
		props: {
			data: {
				type: Array,
				default: () => {
					return [];
				}
			},
			imglist: {
				type: Object,
				default: () => {
					return {};
				}
			},
			messageData: {
				type: Object,
				default: () => {
					return {};
				}
			},
		},
		setup(props: any, ctx: any) {
			const preview = ref(null)
			const { proxy }  = getCurrentInstance()
			console.log('父组件父组件父组件父组件----------------------------------------------------------')
			const data = reactive({
				imageInfo: [],
				imageHeight: 0,
				imageWidth: 0,
				message: {},
				imgList: [],
				showPreviewRef: false,
				tap:'',
			});
      const { t } = useI18n()
			watchEffect(() => {
				// 等比例计算图片的 width、height
				const DEFAULT_MAX_SIZE = 155;
				let imageWidth = 0;
				let imageHeight = 0;
				data.message = props.messageData;
				data.imageInfo = props.data.info[1];
				if (data.imageInfo.width >= data.imageInfo.height) {
					imageWidth = DEFAULT_MAX_SIZE;
					imageHeight = DEFAULT_MAX_SIZE * data.imageInfo.height / data.imageInfo.width;
				} else {
					imageWidth = DEFAULT_MAX_SIZE * data.imageInfo.width / data.imageInfo.height;
					imageHeight = DEFAULT_MAX_SIZE;
				}
			
				// const imgHeight = data.imageInfo.height >= 140 ?  140 : data.imageInfo.height;
				// const imgWidth = imgHeight * data.imageInfo.width / data.imageInfo.height 
				data.imageWidth = imageWidth + 'px';
				data.imageHeight = imageHeight + 'px';
			})

			// todo 优化 查看大图重新加载图片
			const handlePreviewImage = (index) => {
				data.imglist = props.imglist;
				for(var i in data.imglist){
					if(data.imglist[i]===data.message.payload.imageInfoArray[0].url){
						data.tap=i
					}
				}
				data.showPreviewRef = true
				nextTick(()=> {
				  data.imgList.push(props.data.info[0].url)
					proxy.$refs.preview.handlePreviewImg(index)
				})
			};
			const closePreview = ()=> {
				data.showPreviewRef = false
			};
			return {
				...toRefs(data),
				handlePreviewImage,
				closePreview
			};
		}
	});
</script>
<style lang="scss" scoped>
	.message-image {
		position: relative;

		img {
			max-width: 150px;
		}

		.progress {
			position: absolute;
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			padding: 0 20px;
			left: 0;
			top: 0;
			background: rgba(#000000, 0.5);
			display: flex;
			align-items: center;

			progress {
				width: 100%;
			}
		}
	}

	.content {
		&-in {
			border-radius: 6px;
		}

		&-out {
			border-radius: 6px;
		}
	}
</style>
